<template>
  <section class="faq">
    <h2>常见问答<span>FAQ</span></h2>
    <div v-for="(item, index) in list" :key="item.q" :class="(index + 1) % 2 === 0 ? 'item item-right' : 'item item-left'">
      <img src="../assets/images/register-company-FAQ.png">
      <div class="corner"><div></div></div>
      <h3>问：{{ item.q }}</h3>
      <p>答：{{ item.a }}</p>
    </div>
    <button @click="$fn.openQQ">更多问题</button>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-03
   * @Project: eabax
   */
  export default {
    name: 'faq',
    props: {
      list: Array // [{q,a}]
    }
  }
</script>

<style lang="less">
  .faq {
    background-color: #ededed;
    padding: 0 15px; /*no*/
    padding-top: 100px;
    padding-bottom: 100px;
    letter-spacing: 1px;
    text-align: center;

    * {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #464646;
      font-size: 29px;
      font-weight: bold;
      margin-bottom: 110px;
    }
    h2 span {
      font-size: 36px;
      letter-spacing: 2px;
    }
    .item {
      display: inline-block;
      width: 780px;
      padding: 45px;
      margin: 0 140px;
      margin-bottom: 32px;
      background-color: #f8f9ff;
      font-size: 18px;
      border-radius: 30px;
      position: relative;
    }
    h3 {
      color: #1f378c;
      font-weight: bold;
      margin-bottom: 20px;
    }
    p {
      color: #444f76;
    }
    .item-left {
      border-bottom-left-radius: 0;
      text-align: left;
    }
    .item-right {
      border-bottom-right-radius: 0;
      text-align: right;
    }
    img {
      position: absolute;
      bottom: 0;
      width: 80px;
    }
    .item-left img {
      left: -140px;
    }
    .item-right img {
      right: -140px;
    }
    .corner {
      position: absolute;
      bottom: 0;
      width: 45px;
      height: 45px;
      background: #f8f9ff;
    }
    .item-left .corner {
      left: -45px;
    }
    .item-right .corner {
      right: -45px;
    }
    .corner div {
      height: 100%;
      background-color: #ededed;
    }
    .item-left .corner div {
      border-bottom-right-radius: 45px;
    }
    .item-right .corner div {
      border-bottom-left-radius: 45px;
    }
    button {
      background-color: #2e58f9;
      height: 68px;
      width: 337px;
      line-height: 68px;
      border-radius: 34px;
      box-shadow: 4px 7px 7px 0px 
      rgba(46, 88, 249, 0.31);
      color: #ffffff;
      font-size: 24px;
      font-weight: bold;
      display: block;
      margin: 68px auto 0;
    }
  }
</style>
